<template>
  <div class="accountBind">
    <pageTitle :data="titleData" />
    <!-- 绑定邮箱 -->
    <bindEmail />
    <!-- 绑定密码 -->
    <bindPwd />
    <!-- 修改账号角色身份 -->
    <updateRole v-if="!checkIsOnlyStu" />
    <!-- 绑定手机 -->
    <bindPhone />
  </div>
</template>

<script>
import { mapState } from 'vuex';
const pageTitle = () => import("@/views/user/user/component/pageTitle");
const bindEmail = () =>
  import("@/views/user/user/accountBindComponent/bindEmial");
const bindPhone = () =>
  import("@/views/user/user/accountBindComponent/bindPhone");
const bindPwd = () => import("@/views/user/user/accountBindComponent/bindPwd");
const updateRole = () =>
  import("@/views/user/user/accountBindComponent/updateRole");
// import wechatAccoutn from "@/views/user/user/otherAccountBindCompontent/wechatAccoutn";
// import qqAccount from "@/views/user/user/otherAccountBindCompontent/qqAccount";
// import doubanAccount from "@/views/user/user/otherAccountBindCompontent/doubanAccount";
// import weiboAccount from "@/views/user/user/otherAccountBindCompontent/weiboAccount";
export default {
  components: {
    pageTitle,
    bindEmail,
    bindPhone,
    bindPwd,
    updateRole,
    // wechatAccoutn,
    // qqAccount,
    // doubanAccount,
    // weiboAccount,
  },
  data() {
    return {
      titleData: {
        name: "基本资料",
        showProblem: true,
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo
    }),
    checkIsOnlyStu() {
      return this.userInfo.authNum.length == 1 && this.userInfo.authNum.indexOf(1) !== -1
    }
  }
};
</script>

<style lang="stylus">
.accountBind {
  flex: 1;
  padding: 23px 95px 0 63px;

  .title {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Segoe UI;
    font-size: 22px;
    color: #666666;

    .problem {
      cursor: pointer;
      position: relative;
      margin-top: 18px;
      font-family: Segoe UI;
      font-size: 14px;
      color: #b0b0b0;

      i {
        font-size: 15px;
      }
    }
  }

  .publicBox {
    padding-left: 2px;
    padding-top: 22px;
    height: 101px;
    border-top: 1px solid #dcdbdb;

    .pdBox {
      padding-left: 38px;
      padding-right: 59px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .imgBox {
        margin-right: 35px;

        i {
          font-size: 36px;
        }
      }

      .desc {
        .content {
          font-family: Segoe UI;
          font-size: 18px;
          color: #8b8b8b;

          .dataTitle {
            display: inline-block;
          }

          .tips {
            margin-left: 20px;
            font-family: Segoe UI;
            font-size: 14px;
            color: rgba(247, 6, 6, 0.66);
          }

          .haveData {
            color: #8d8d8d;
          }

          .roleInfo {
            span {
              margin-top: 10px;
              margin-right: 5px;
              width: -webkit-fit-content;
              width: -moz-fit-content;
              width: fit-content;
              display: inline-block;
              height: 21px;
              padding: 1px 2px;
              line-height: 21px;
              background-color: #fea91b;
              border-radius: 5px;
              font-family: PMingLiU-ExtB;
              font-size: 14px;
              color: #fff;
            }
          }

          .eyeIcon {
            cursor: pointer;
            margin-left: 23px;
            // width: 100%;
            // height: 100%;
          }
        }

        .tips {
          font-family: Segoe UI;
          font-size: 16px;
          color: #8b8b8b;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .btnBox {
        margin: 24px 0 0 auto;

        button {
          cursor: pointer;
          outline: none;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 68px;
          height: 39px;
          background-color: #ffffff;
          border-radius: 5px;
          border: solid 1px #707070;
          font-family: Segoe UI;
          font-size: 16px;
          // color: #b0b0b0;
          color: #000;
        }

        .btn-disabled {
          cursor: not-allowed;
          border: none;
        }
      }
    }
  }

  .notBind {
    color: #b0b0b0;

    i {
      color: #b0b0b0 !important;
    }

    button {
      background: #b0b0b0 !important;
      color: #fff !important;
    }
  }

  .otherAcoountBind {
    padding: 0 0 0 53px;
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .otherAccount:last-child {
      margin: 0;
    }
  }
}
</style>